<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>甘孜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hot.css">
    <style>
        body{background: #fff;overflow: hidden;}
        #video{height:210px;width:100%;background-color:#000;overflow: hidden;}
        #video video{height:100%;width:100%;}
        #video span{width:50%;position:absolute;top:5px;left:2%;}
        #video span img{width:20%;}
        .video_title{width:100%;padding:1rem 0;background-color:#fff;border-bottom: 1px solid #F0F0F0;}
        .video_title .title{width:100%;}
        .video_title .title span:nth-child(1){width: 100%;}
        .video_title .title {font-size:1.6rem;font-weight:bold;padding: 0;border: none;}
        .video_title .title * {text-align: left!important;padding: 0!important;}
        .video_title .author{color:#7A7A7A;}
        section{width:100%;background-color:#fff;padding:1rem;color:#7A7A7A;overflow:hidden;}
        section .introduction{margin-bottom:1rem;font-size:1.5rem;}
        section .content{text-align: justify;}
        .header .txt{
             line-height:1.5;}
        .share_box{width:100%;height:100%;position:fixed;top:0;left:0;background: rgba(0,0,0,.5);z-index:22;}
        .share_con{width:100%;background-color:#fff;position:fixed;bottom:0;left:0;}
        .share_con ul{margin:1rem 0;}
        .share_con li{width:25%;text-align:center;}
        .share_con .title{width:100%;padding:1.5rem 0;text-align:center;color:#828282;font-size:1.5rem;}
    </style>
</head>
<body>
    <header style="height: auto;"></header>
    <div >
        <div id="video">
            <div style="text-align:center;width: 100%;border: 0;" >
                <div class="j-play hide" style="padding-top:7.5rem;"><img style="width: 10%" src="./images/vision_play.png"></div>
                <video style="height: 210px;" controls="" src="" id="J-player-video" width='100%'  class="hide" webkit-playsinline="true"></video>
                <iframe id="J-player" src="" width='100%' height='210' frameborder="0" scrolling="no"></iframe>
            </div>
            <span class="hide"><img class="back" src="images/video_return.png" alt=""></span>
        </div>


        <section id="content-box">

        </section>
    </div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        var heardertxt = "视频播放";
        $(function () {
            $("header").load("details_header.html");

//            $("body").on("tap",".back",function(){
//                history.go(-1);
//            });
            var _id = $C.query().id,
                url = $C.query().url;
            if(_id){
                //mv详情
                sendByUrl("/VisualDetails",{id:_id},function(res){
                    var data = res.data || {};
                    $("#content-box").html(template("video-content-temp", {
                        data: data
                    }));
                    $("#J-player").attr("src",data.videourl);
                    $(".share_open").removeClass("hide");
                });
            }else if(url){
                if(url.indexOf(".html") > -1){
                    $("#J-player").attr("src",url);
                }else{
                    $("#J-player").addClass("hide");
                    $("#J-player-video").attr("src",url).removeClass("hide");
                }
            }

            //播放视频
            $("body").on("click",".j-play",function () {
                if(!$("#J-player").attr("data-src")){
                    alert("资源加载错误")
                    return;
                }
                $(this).addClass("hide");
                $("#J-player").attr("src",$("#J-player").attr("data-src")).removeClass("hide");
            });
            $("body").on("click",".share_item",function () {
                var id = $(this).attr("data-id"),
                        title = $(".j_video_title").text(),
                        subtitle = $(".content").text().substr(0,20),
                        url = "http://www.ganzixinwen.com/uploads/file/2017/0602/20170602060904451.jpg";

                shareInfo(title,subtitle,location.href,url,id);
            });
        })
    </script>
    <script type="text/html" id="video-content-temp">
            <div class="video_title">
                <div class="title j_video_title">{{#data.content}}</div>
                <p >
                    <span class="hide"><img src="images/video_share.png" alt="" style="width:40%;"></span>
                </p>
            </div>
            <p class="introduction">简介></p>
            <p class="content">{{data.description}}</p>

    </script>
</body>
</html>